<template>
  <view class="activity-detail-container">
    <image v-if="activity.image_url" :src="activity.image_url" class="activity-detail-image" mode="aspectFill" />
    <view class="activity-detail-content">
      <view class="activity-detail-title">{{ activity.title }}</view>
      <view class="activity-detail-meta">
        <text class="activity-detail-time">活动时间：{{ formatTime(activity.activity_start_time) }} ~ {{ formatTime(activity.activity_end_time) }}</text>
        <text class="activity-detail-location">地点：{{ activity.location }}</text>
      </view>
      <view class="activity-detail-tags">
        <text class="activity-detail-tag">人数上限：{{ activity.capacity }}</text>
        <text class="activity-detail-tag">积分：{{ activity.points }}</text>
        <text class="activity-detail-tag">年龄：{{ activity.min_age }}-{{ activity.max_age }}</text>
      </view>
      <view class="signup-area">
        <view class="signup-avatars">
          <image v-for="(user, idx) in signupUsers" :key="user.user_id" :src="user.avatar" class="signup-avatar" :title="user.name" />
        </view>
        <button class="signup-btn" :class="{joined: hasJoined}" :disabled="hasJoined" @click="handleSignup">
          {{ hasJoined ? '已报名' : '立即报名' }}
        </button>
      </view>
      <view class="activity-detail-section">
        <view class="activity-detail-section-title">活动简介</view>
        <view class="activity-detail-body">{{ activity.content }}</view>
      </view>
      <view class="activity-detail-section">
        <view class="activity-detail-section-title">报名时间</view>
        <view class="activity-detail-body">{{ formatTime(activity.registration_start_time) }} ~ {{ formatTime(activity.registration_end_time) }}</view>
      </view>
      <view v-if="activity.remarks" class="activity-detail-section">
        <view class="activity-detail-section-title">备注</view>
        <view class="activity-detail-body">{{ activity.remarks }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { request } from '../../utiles/request';

const activity = ref<any>({});
const signupUsers = ref<any[]>([]);
const hasJoined = ref(false);
const userId = ref<number|null>(null);
const activityId = ref<number|null>(null);

const formatTime = (time: string) => {
  if (!time) return '';
  const date = new Date(time.replace(/-/g, '/'));
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const h = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  return `${y}-${m}-${d} ${h}:${min}`;
};

// 获取当前用户ID
const getUserId = () => {
  const local = uni.getStorageSync('userInfo');
  if (local) {
    try {
      const obj = typeof local === 'string' ? JSON.parse(local) : local;
      return obj.data?.id || obj.id;
    } catch (e) {
      return null;
    }
  }
  return null;
};

// 获取活动详情
const getActivityDetail = (id: number) => {
  request({
    url: `/admin/api/activity/detail/${id}`,
    method: 'GET'
  }).then(res => {
    if (res.data && (res.data.code === 0 || res.data.code === 200)) {
      activity.value = res.data.data;
    }
  });
};

// 获取报名用户列表
const getSignupUsers = (id: number) => {
  request({
    url: '/admin/api/activity/signup/list',
    method: 'GET',
    data: { activity_id: id }
  }).then(res => {
    if (res.data && res.data.code === 0) {
      signupUsers.value = res.data.data.map((user: any) => ({
        ...user,
        avatar: 'https://p1.bdxiguaimg.com/img/mosaic-legacy/fe6900001bcfaf712390~0x0.image?from=avatar'
      }));
    }
  });
};

// 获取当前用户是否已报名
const getSignupStatus = (activityId: number, userId: number) => {
  request({
    url: '/admin/api/activity/signup/status',
    method: 'GET',
    data: { activity_id: activityId, user_id: userId }
  }).then(res => {
    if (res.data && res.data.code === 0) {
      hasJoined.value = !!(res.data.data && res.data.data.joined);
    }
  });
};

// 报名操作
const handleSignup = () => {
  if (hasJoined.value || !activityId.value || !userId.value) return;
  request({
    url: '/admin/api/activity/signup',
    method: 'POST',
    data: {
      activity_id: activityId.value,
      user_id: userId.value
    }
  }).then(res => {
    if (res.data && res.data.code === 0) {
      uni.showToast({ title: '报名成功', icon: 'success' });
      hasJoined.value = true;
      getSignupUsers(activityId.value);
    } else if (res.data && res.data.code === 409) {
      uni.showToast({ title: '您已报名', icon: 'none' });
      hasJoined.value = true;
    } else {
      uni.showToast({ title: res.data?.msg || '报名失败', icon: 'none' });
    }
  });
};

onLoad((options) => {
  userId.value = getUserId();
  if (options && options.id) {
    activityId.value = Number(options.id);
    getActivityDetail(activityId.value);
    getSignupUsers(activityId.value);
    if (userId.value) {
      getSignupStatus(activityId.value, userId.value);
    }
  }
});
</script>

<style>
.activity-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80rpx;
}
.activity-detail-image {
  width: 100vw;
  height: 340rpx;
  object-fit: cover;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.08);
}
.activity-detail-content {
  width: 92vw;
  background: #fff;
  border-radius: 24rpx;
  margin-top: -40rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.08);
  padding: 40rpx 32rpx 32rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.activity-detail-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #1976D2;
  margin-bottom: 18rpx;
  line-height: 1.3;
}
.activity-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
  margin-bottom: 18rpx;
}
.activity-detail-time {
  font-size: 24rpx;
  color: #1976D2;
}
.activity-detail-location {
  font-size: 24rpx;
  color: #43a047;
}
.activity-detail-tags {
  display: flex;
  gap: 18rpx;
  margin-bottom: 24rpx;
}
.activity-detail-tag {
  font-size: 22rpx;
  color: #1976D2;
  background: #e3f2fd;
  border-radius: 8rpx;
  padding: 4rpx 16rpx;
}
.activity-detail-section {
  margin-bottom: 24rpx;
  width: 100%;
}
.activity-detail-section-title {
  font-size: 28rpx;
  color: #1565C0;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.activity-detail-body {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  background: #f7fafd;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
}
.signup-area {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  margin-top: 8rpx;
}
.signup-avatars {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}
.signup-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.08);
  margin-left: -4rpx;
  background: #f5f7fa;
}
.signup-avatar:first-child {
  margin-left: 0;
}
.signup-btn {
  background: linear-gradient(135deg, #1976D2 0%, #43a047 100%);
  color: #fff;
  font-size: 28rpx;
  border-radius: 32rpx;
  padding: 0 40rpx;
  height: 56rpx;
  line-height: 56rpx;
  border: none;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.08);
}
.signup-btn.joined {
  background: #bdbdbd;
  color: #fff;
}
</style>